<form class="form-horizontal" [formGroup]="form" >
  <div class="form-group">
    <label class="col-sm-2 control-label">姓名</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" placeholder="姓名"
             formControlName="name"  minlength="2"
             greatByteLength="30"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-9 col-sm-offset-2 has-error" *ngIf="form.get('name').dirty && form.get('name').errors">
      至少2个字符，至多15个字符！
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">面积</label>
    <div class="col-sm-9">
      <input type="number" class="form-control" placeholder="面积"
             formControlName="area"
             greatNumber="3"
      >
    </div>
  </div>
  <div class="form-group">
   <div class="col-sm-9 col-sm-offset-2 has-error" *ngIf="form.get('area').dirty && form.get('area').errors">
      只能输入整数，最多三位
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" placeholder="Email"
             formControlName="email"  required
             greatRegexp="^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-9 col-sm-offset-2 has-error" *ngIf="form.get('email').dirty && form.get('email').errors">
      邮箱格式有误！
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">手机号</label>
    <div class="col-sm-9">
      <input class="form-control" placeholder="手机号"
             formControlName="phone"
             greatMobile
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-9 col-sm-offset-2 has-error" *ngIf="form.get('phone').dirty && form.get('phone').errors">
      手机号格式有误！
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">地址</label>
    <div class="col-sm-9">
      <textarea class="form-control" rows="3"
                formControlName="address"
                greatByteLength="100"></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-9 col-sm-offset-2 has-error" *ngIf="form.get('address').dirty && form.get('address').errors">
      地址最多输入50个汉字，或100个英文
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-9">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-9">
      <button type="submit" class="btn btn-default" [disabled]="!form.valid">保 存</button>
    </div>
  </div>
</form>
